<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<style type="text/css">
			body {
				background-color: #FFFCF4;
				font: "微软雅黑";
			}
			#container {
				width: 100%;
				margin: 10px auto;
			}
			#head {
				text-align: center;
				font-family: "微软雅黑";
				font-size: 40px;
			}
			#table{
				font-size: 1.4em;
				align-content: center;
			}
			#table td{
				border-bottom: #001199 dashed 2px;
				/*background: #FFFFFF no-repeat url(image/m_1270370270671.jpg);*/
				/*background-position: -69px -60px;*/
				-webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.55);
				text-align: center;
			}
			#table td.empty{
				border-bottom: none;
				background: none;
				-webkit-box-shadow:none;
			}
			.leader{
				/*background-position: -120px -440px !important;*/
				color: #FFF;
				background-color: #F00;
			}
			
			.hint, .hinted{
				color: #FFFCF4;
				background-color: #81B626;
				-webkit-animation: lastHint 0.5s;	/* Safari 和 Chrome */
			}
			
			.hinted{
				opacity: 0.4;
			}
			
			#table td.last_hint{
				opacity: 1;
				color: #FFFCF4;
				background-color: #81B626;
				border-radius: 20px;
				-webkit-animation: lastHint 2s;	/* Safari 和 Chrome */
				box-shadow: 7px 13px 25px -1px rgba(0, 0, 0, 0.55);
			}
			
			#result, #co {
				margin: 20px;
				color: #FFF;
			}
			#result{
				font-size: 80px;
			}
			#hint{
				color: #F00;
			}
			.button {
				/*background-color: #252;*/
				color: #FFF;
				height: 2em;
				border: dotted #FF0000 1px;
				width: 100%;
				font-size: 1.3em;
				background: url(image/progress1.png) no-repeat #449932;
				background-size: 0% 100%;
			}
			.button:hover {
				background-color: #FFF !important;
				color: #F00 !important;
				border: dotted #FF0000 1px;
				width: 100%;
			}
			
			@-webkit-keyframes lastHint /* Safari 和 Chrome */
			{
				from {background: #F00; -webkit-transform: rotateY(0deg);}
				to {background: #FF0; color: #EEE; -webkit-transform: rotateY(360deg);}
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="head">
				中深软通1609花名册
			</div>
			<hr color="#FFF"/>
			<table id="table" border="0" cellspacing="7px" cellpadding="8px" align="center">
				<tr>
					<td style="color:red">关琛</td>
					<td >王超</td>
					<td  style="color:red" >郑智强</td>
					<td >陈杨森</td>
					<td >&nbsp;</td>
				</tr>
				<tr>
					<td >杨越</td>
					<td >陈叶</td>
					<td >石睿鑫</td>
					<td style="color:red">曹耿珲</td>
					<td >&nbsp;</td>
				</tr>
				<tr>
					<td >梅涛</td>
					<td >王子昂</td>
					<td >陈光进</td>
					<td >曾瑶</td>
					<td >杨红星</td>
				</tr>
				<tr>
					<td >&nbsp;</td>
					<td style="color:red" >所志松</td>
					<td >&nbsp;</td>
					<td >&nbsp;</td>
					<td >&nbsp;</td>
				</tr>
			</table>
			<div id="co">
				<input id="random" class="button" type="button" value="手气不错" onclick="randomStus()" title="提示"/>
			</div>
			<script type="text/javascript" charset="utf-8">
				var students = [];
				var del_students = [];
				
				var all = document.getElementById("table").getElementsByTagName("td");
				var index = 0;
				for (var i = 0; i < all.length; i++) {
					var _students = all[i];
					if(_students && /^[\u4e00-\u9fa5]+$/.test(_students.innerText)){
						students.push(_students.innerText);
						_students.id = "s"+_students.innerText.trim();
						index ++;
					}
				}
				
				function showOnly(index){
					if(index){
						var ok = document.getElementById("s"+index);
						addClass(ok, "last_hint");
					}
					//console.info(ok, index, "show");
				}
			
				function show(index, clsName){
					if(index){
						var ok = document.getElementById("s"+index);
						addClass(ok, clsName?clsName:"hint");
					}
					//console.info(ok, index, "show");
				}
				
				function hideOnly(index){
					var ok = document.getElementById("s"+index);
					removeClass(ok, "last_hint");
					//console.info(ok, index, "hide");
				}
				
				function hide(index){
					var ok = document.getElementById("s"+index);
					removeClass(ok, "hint");
					//console.info(ok, index, "hide");
				}
			
				function randomStus() {
					assignProgress(0);
					console.clear();
					document.getElementById("random").value = "命中...";
					setTimeout("randomIntervalBuffer()", 20);
					setTimeout("clearIntervalBuffer()", 2000);
					setTimeout("random()", 2500);
				}
				
				
				var progressIndex = 0;
				var progressStep = 10;
				function increaseProgress(){
					if(progressIndex < 90){
						progressIndex += progressStep;
						assignProgress(progressIndex);
					}
				}
				
				function resetProgress(){
					progressIndex = 0;
				}
				
				var progress = document.getElementById("random");
				function assignProgress(index){
					console.info('assignProgress', index);
					//progress.style.backgroundPositionX= index+"%";
					progress.style.backgroundSize= index+"% 100%";
				}
				
				
				
				var rs;
			
				function randomIntervalBuffer() {
					rs = setInterval("randomBuffer()", 100);
				}
			
				function clearIntervalBuffer() {
					clearInterval(rs);
					document.getElementById("random").value = "马上就来";
					assignProgress(95);
				}
				
				function randomBuffer() {
					console.info('randomBuffer');
					increaseProgress();
					var index = Math.floor(Math.random() * students.length);
					index = students[index];
					show(index);
					//ok.class = "hint";
					// document.getElementById("result").innerHTML = students[index];
				}
				//var stu_index = students.length;
				function random() {
					var index = Math.floor(Math.random() * students.length);
					for (var i = 0; i < students.length; i++) {
						if(students[i] != students[index]){
							hide(students[i]);
						}
					}
					
					for (var i = 0; i < del_students.length; i++) {
						hideOnly(del_students[i]);
					}
					show(students[index],"hinted");
					showOnly(students[index]);
					assignProgress(100);
					resetProgress();
					document.getElementById("random").value = "手气不错 【" + students[index]  + "】 > "+(students.length-1);
					del_students.push(students[index]);
					students.splice(index, 1);
					shuffle(students);
					//stu_index--;
				}
			
				function shuffle(o) { //v1.0
					for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
					return o;
				};
				
				 function hasClass(obj, cls) {
		            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
		        }
		
		        function addClass(obj, cls) {
		            if (!hasClass(obj, cls)) obj.className += " " + cls;
		        }
		
		        function removeClass(obj, cls) {
		            if (hasClass(obj, cls)) {
		                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
		                obj.className = obj.className.replace(reg, ' ');
		            }
		        }
			
			</script>
		</div>
	                                                                            
                                                                            
</body>
</html>